{extend name="main/index" /}
{block name="main"}
<div class="content-page">
    <!-- ============================================================== -->
    <!-- Start Content here -->
    <!-- ============================================================== -->
    <div class="content">
        <!-- Page Heading Start -->
        <div class="page-heading">
            <div class="row">
                <div class="col-md-12">
                    <div class="widget">
                        <div class="widget-header transparent">
                            <h2><strong>店铺属性列表</strong></h2>
                            <div class="additional-btn">
                                <a href="#" class="hidden reload"><i class="icon-ccw-1"></i></a>
                                <a href="#" class="widget-toggle"><i class="icon-down-open-2"></i></a>
                                <a href="#" class="widget-close"><i class="icon-cancel-3"></i></a>
                            </div>
                        </div>
                        <div class="widget-content">
                            <div class="data-table-toolbar">
                                <div class="row">
                                    <div class="col-md-4">
                                        <!-- <form role="form">
                                            <input type="text" class="form-control" placeholder="Search...">
                                        </form> -->
                                    </div>
                                    <div class="col-md-8">
                                        <div class="toolbar-btn-action">
                                            <button data-modal="md-fade-in-scale-up" class="btn btn-info btn-sm md-trigger">添加属性</button>
                                          <!--   <a class="btn btn-danger"><i class="fa fa-trash-o"></i> Delete</a>
                                            <a class="btn btn-primary"><i class="fa fa-refresh"></i> Update</a> -->
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table data-sortable class="table table-hover table-striped">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>属性名</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    {volist name="list" id="vo"}
                                    <tr>
                                        <td>{$vo.id}</td>
                                        <td>{$vo.attr}</td>
                                        <td>{$vo.status == 1?'开启':'关闭'}</td>
                                        <td>
                                            <button class="btn btn-danger del-btn" data-id="{$vo.id}">删除</button>
                                            <a href="{:url('admin/ShopAttr/edit',['id' => $vo['id']])}" class="btn btn-success">编辑</a>
                                        </td>
                                    </tr>
                                    {/volist}
                                    </tbody>
                                </table>
                            </div>
                            {$list->render()}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal fade in scale up -->
<div class="md-modal md-fade-in-scale-up" id="md-fade-in-scale-up">
    <p>
        <button class="btn btn-danger md-close">关闭</button>
    </p>
    <div class="md-content">
        <h3>新增属性</h3>
        <div class="widget-content padding">
            <div id="basic-form">
                <form role="form" action="{:url('admin/ShopAttr/save')}" method="post">
                    <div class="form-group">
                        <label for="exampleInputEmail1">属性名:</label>
                        <input type="text" class="form-control" name="attr">
                    </div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-2">
                            <input type="radio" name="status" value="1" checked>启用
                            <input type="radio" name="status" value="2" >禁用
                        </div>
                    </div>
                    <p></p>
                    <p><button type="submit" class="btn btn-info">添加</button></p>
                </form>
            </div>
        </div>
    </div><!-- End div .md-content -->
</div><!-- End div .md-modal .md-fade-in-scale-up -->

<script src="/static/admin/assets/js/jquery.min.js"></script>
<script src="/static/admin/assets/js/toastr.min.js"></script>
<script>
    $(document).ready(function() {
        $('.del-btn').click(function(){
           var id = $(this).attr('data-id');
           // console.log(id);
           if (confirm('您确定要 [ 删 除 ] 该属性吗?')) {
            var obj = $(this).parents('tr');

             delAjax(id, obj);
           }
        });
    });

        // 执行AJAX删除
        function delAjax(id, obj) {
            $.ajax({
                type: 'delete',
                url: '/Attr/' + id,
                dataType : 'json',
                success : function (data){
                    console.log(data);
                    if (data.status) {
                        toastr.success(data.info);
                        obj.remove();
                    } else {
                        toastr.error(data.info, '警告 :');
                    }
                },
                error : function () {
                    alert('AJAX执行失败!');
                }
            });
        }
</script>
{/block}